<template>
	<view class="container">
		<view class="pay-info">
			<view class="pay-info-item">
			
				<view class="pay-title">
					<text class="iconfont fail-icon">&#xe6f8;</text>
					<view>订单提交失败</view>
				</view>
				<view class="pay-dis pay-dis-t">
					导致您失败的原因可能是：
				</view>
				<view class="pay-dis">
					1，网络不稳定或网络出错；
				</view>
				<view class="pay-dis">
					 2，订单信息填写错误；
				</view>
				<view class="pay-dis">
					3，订单提交信息与实际不符。
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default" @click="saveOrderInvoice">
				<view class="text">重新提交</view>
			</view>
		</footer-fixed-bar>
	</view>
</template>

<script>
	import footerFixedBar from "@/components/footer-fixed-bar.vue";
	export default {
		components: {
			footerFixedBar
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.container {
		
	}
	
	.pay-info {
		background: $uni-bg-color;
		padding: $uni-spacing-row-sm;
		display: block;
		
		.pay-title{
			font-size: $uni-font-size-lg;
			text-align: center;
			margin-bottom: 46rpx;
			.fail-icon{
				font-size: 94rpx;
				color: #ff4f44;
				margin-bottom: 24rpx;
			}
		}
		.pay-info-item {
			text-align: left;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;
			.pay-dis{
				width: 332rpx;
				margin: auto;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-grey;
			}
			.pay-dis-t{
				text-align: center;
				margin-bottom: $uni-spacing-col-base;
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default{
		text-align: center;
		padding: 0 25rpx 22rpx;
		background: $uni-bg-color-grey;
		.text{
			background:$uni-bg-color-primary;
			padding: 30rpx 0;
			color: $uni-text-color-inverse;
			border-radius: $uni-border-radius-lg;
			font-size: $uni-font-size-lg;
		}
	}
</style>
